<template>
  <div style="height: 220px">
    <div :id="videoBoxId" class="video-player" style="width: 100%; height: 220px" />
  </div>
</template>

<script>
import Player from 'xgplayer'
import FlvPlayer from 'xgplayer-flv'
export default {
  props: {
    isScreen: {
      type: Boolean,
      default: true
    },
    showTools: {
      type: Boolean,
      default: true
    },
    cameraCode: {
      type: String,
      default: ''
    },
    videoBoxId: {
      type: String,
      default: 'video1'
    }
  },
  data() {
    return {
      type: '',
      port: 1900,
      players: []
    }
  },
  watch: {
    videoBoxId() {
      this.$nextTick(() => {
        this.getPreviewURLs()
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getPreviewURLs()
    })
  },
  beforeDestroy() {
    if (this.players.length > 0) {
      this.players.forEach((v) => {
        v.destroy()
      })
    }
    clearInterval(this.cameraInterval)
    this.cameraInterval = null
  },
  methods: {
    createPlayer(url) {
      let videoPlayer
      if (this.type === 'mp4') {
        videoPlayer = new Player({
          id: this.videoBoxId,
          url: url,
          fluid: true,
          autoplay: true,
          autoplayMuted: true,
          isLive: true,
          playsinline: true,
          controls: true,
          cors: true
        })
      } else {
        videoPlayer = new FlvPlayer({
          id: this.videoBoxId,
          url: url,
          autoplay: true, // 自动播放
          playsinline: true,
          isLive: true,
          cors: true,
          autoplayMuted: true,
          controls: true
        })
      }
      return videoPlayer
    },
    initPlayer(url) {
      const player = this.createPlayer(url)
      this.players.push(player)
      player.on('error', (e) => {
        if (e.errorType !== 'other' && e.errorType !== 'network') {
          return
        }
        this.reconnect(player, url)
      })
      // 播放完成
      player.on('ended', (e) => {
        this.reconnect(player, url)
      })
    },
    reconnect(player, url) {
      const self = this
      player.pause()
      player.destroy()
      setTimeout(() => {
        try {
          self.initPlayer(url)
        } catch (e) {
          console.log('断线重连失败, 重试:', e)
          self.reconnect(player, url)
        }
      }, 1000 * 10)
    },
    // 通过摄像头编码获取视屏
    getPreviewURLs() {
      let src
      if (this.cameraCode.indexOf('.mp4') > -1) {
        this.type = 'mp4'
        src = this.cameraCode
      } else {
        const camera = this.cameraCode || '50010500421328010021'
        src = `http://10.30.106.100:1900/live/D1/${camera}.flv`
      }
      this.initPlayer(src)
    }
  }
}
</script>

<style lang="scss" scoped></style>

<style>
.xgplayer-cssfullscreen {
  display: none;
}
.video-player {
  width: 100% !important;
  height: 100% !important;
}
.xgplayer .xgplayer-start {
  width: 0 !important;
  height: 0 !important;
}
.xgplayer .xgplayer-loading {
  width: 0 !important;
  height: 0 !important;
}

.xgplayer .xgplayer-replay {
  width: 0 !important;
  height: 0 !important;
}
.xgplayer .xgplayer-start.interact,
.xgplayer .xgplayer-start[data-state='pause'] .xg-icon-pause {
  width: 0 !important;
  height: 0 !important;
}

.xgplayer-is-ended .xgplayer-loading,
.xgplayer-is-enter .xgplayer-loading,
.xgplayer-is-error .xgplayer-loading,
.xgplayer-nostart .xgplayer-loading,
.xgplayer-pause .xgplayer-loading {
  width: 0 !important;
  height: 0 !important;
}
.xgplayer-nostart .xgplayer-loading,
.xgplayer-pause .xgplayer-loading,
.xgplayer-is-enter .xgplayer-loading,
.xgplayer-is-ended .xgplayer-loading,
.xgplayer-is-error .xgplayer-loading {
  width: 0 !important;
  height: 0 !important;
}
.xgplayer.xgplayer-inactive .xgplayer-start.auto-hide,
.xgplayer.xgplayer-is-enter .xgplayer-start.auto-hide,
.xgplayer.xgplayer-isloading.xgplayer-playing .xgplayer-start,
.xgplayer.xgplayer-is-enter .xgplayer-start,
.xgplayer.xgplayer-is-error .xgplayer-start,
.xgplayer.xgplayer-is-enter .xgplayer-start.show,
.xgplayer.xgplayer-is-error .xgplayer-start.show {
  width: 0 !important;
  height: 0 !important;
}
</style>
